<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理的基本使用</title>
</head>
<body>
  <div id="root">
      <!--
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了（被vm管理的函数不能定义为箭头函数)
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->

<!--      Vue中的事件函数类似于原生html中的事件函数 使用vue指令定义 v-on-->
<!--      注意不写()才会隐式传递event-->
      <button @click="handleClick1">按钮</button>

<!--      与react中不同的是函数传值可以自动写在()内，不必采用科里化或者高阶函数，如果要同时传递数据和event对象，要将event写成$event-->
      <button @click="handleClick2(120,$event)">按钮</button>

<!--
   v-bind指定属性的值是来自于data内的属性
   v-on指定事件函数的回调函数来自于methods中的值
-->
  </div>


  
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    
    const vm = new Vue({
        el:'#root',
        data:{

        },
        //回调函数定义在methods属性中
        //定义的回调函数不会像定义在data做的数据绑定在_data属性中，定义的回调函数会直接绑定到vm对象中
        //函数不能定义成箭头函数，因为箭头函数中的this在这里为window,定义成普通函数，因为最后这个函数会被Vue实例进行调用，所以函数中的this为vm
        //!!!复习一下箭头函数的知识点，箭头函数中的this是静态this与箭头函数所在的外部作用域有关，也就是说只有定义在函数内部的箭头函数或者定义在class内部的箭头函数中的this才是需要考虑的
        methods:{
             //和React中的函数定义类似，Vue中的函数默认隐式传递event对象
             handleClick1(e){
                 console.log(e.target)
          },

            handleClick2(number,e){
                console.log(number,e.target)
            }
        }
    });
    console.log(vm)
    
    
</script>
</body>
</html>